<template>
  <div class="attendance-management">
    <div class="header">
      <div class="header-left">
        <router-link to="/main/renshi/kaoqing" class="back-btn">
          <i class="el-icon-arrow-left"></i> 返回
        </router-link>
        <div class="save-info">
          <el-button type="primary" icon="el-icon-check" @click="saveRecord"
            >保存</el-button
          >
          <el-button type="info" icon="el-icon-printer" @click="printForm"
            >打印</el-button
          >
        </div>
      </div>
      <h1 class="title">深圳市艾美思普科技有限公司<br />考勤管理办法</h1>
      <div class="meta">
        <div @dblclick="editMeta = true">
          <p v-if="!editMeta">文件编号：{{ meta.fileNumber }}</p>
          <input
            v-else
            v-model="meta.fileNumber"
            style="width: 100px"
            @blur="editMeta = false"
          />
        </div>
        <div @dblclick="editMeta = true">
          <p v-if="!editMeta">文件版本：{{ meta.version }}</p>
          <input
            v-else
            v-model="meta.version"
            style="width: 100px"
            @blur="editMeta = false"
          />
        </div>
        <div @dblclick="editMeta = true">
          <p v-if="!editMeta">编制部门：{{ meta.department }}</p>
          <input
            v-else
            v-model="meta.department"
            style="width: 100px"
            @blur="editMeta = false"
          />
        </div>
        <div @dblclick="editMeta = true">
          <p v-if="!editMeta">生效日期：{{ meta.effectiveDate }}</p>
          <input
            v-else
            v-model="meta.effectiveDate"
            style="width: 100px"
            @blur="editMeta = false"
          />
        </div>
      </div>
      <div>
        <div
          style="
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
            line-height: 30px;
          "
        >
          <div @dblclick="editApproval = true">
            <label v-if="!editApproval"
              ><span>批准：{{ approvalPerson }}</span>
              <span
                >日期：{{ approvalDate.year }}年{{ approvalDate.month }}月{{
                  approvalDate.day
                }}日</span
              ></label
            >
            <label v-else>
              <span
                >批准：<input
                  type="text"
                  v-model="approvalPerson"
                  style="width: 100px"
                  @blur="editApproval = false"
              /></span>
              <span
                >日期：<input
                  type="text"
                  v-model="approvalDate.year"
                  style="width: 40px"
                />年
                <input
                  type="text"
                  v-model="approvalDate.month"
                  style="width: 40px"
                />月
                <input
                  type="text"
                  v-model="approvalDate.day"
                  style="width: 40px"
                />日</span
              >
            </label>
          </div>
          <div @dblclick="editReview = true">
            <label v-if="!editReview"
              ><span>审核：{{ reviewer }}</span>
              <span
                >日期：{{ reviewDate.year }}年{{ reviewDate.month }}月{{
                  reviewDate.day
                }}日</span
              ></label
            >
            <label v-else>
              <span
                >审核：<input
                  type="text"
                  v-model="reviewer"
                  style="width: 100px"
                  @blur="editReview = false"
              /></span>
              <span
                >日期：<input
                  type="text"
                  v-model="reviewDate.year"
                  style="width: 40px"
                />年
                <input
                  type="text"
                  v-model="reviewDate.month"
                  style="width: 40px"
                />月
                <input
                  type="text"
                  v-model="reviewDate.day"
                  style="width: 40px"
                />日</span
              >
            </label>
          </div>
          <div @dblclick="editCompilation = true">
            <label v-if="!editCompilation"
              ><span>编制：{{ compilationPerson }}</span>
              <span
                >日期：{{ compilationDate.year }}年{{
                  compilationDate.month
                }}月{{ compilationDate.day }}日</span
              ></label
            >
            <label v-else>
              <span
                >编制：<input
                  type="text"
                  v-model="compilationPerson"
                  style="width: 100px"
                  @blur="editCompilation = false"
              /></span>
              <span
                >日期：<input
                  type="text"
                  v-model="compilationDate.year"
                  style="width: 40px"
                />年
                <input
                  type="text"
                  v-model="compilationDate.month"
                  style="width: 40px"
                />月
                <input
                  type="text"
                  v-model="compilationDate.day"
                  style="width: 40px"
                />日</span
              >
            </label>
          </div>
        </div>
        <!-- 分发部门编号部分 -->
        <div>
          <label>分发部门编号</label><br />
          <div
            v-for="(group, groupIndex) in distributionGroups"
            :key="groupIndex"
          >
            <div
              style="
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 10px;
                text-align: left;
                align-items: center;
                width: 600px;
                margin: 10px auto;
              "
            >
              <div
                style="white-space: nowrap; display: flex"
                v-for="(item, itemIndex) in group"
                :key="itemIndex"
              >
                &emsp;<input
                  type="checkbox"
                  v-model="selectedDepartments[item.value]"
                />
                <span
                  @dblclick="isEditingDepartment = true"
                  v-if="!isEditingDepartment"
                  >{{ item.label }}</span
                >
                <input
                  v-else
                  type="text"
                  v-model="item.label"
                  @blur="isEditingDepartment = false"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 修订记录部分 -->
      <button class="add-record-btn" @click="addRevisionRecord">
        新增修订记录
      </button>
      <table>
        <caption>
          修订记录
        </caption>
        <thead>
          <tr>
            <th>版本</th>
            <th>生效日期</th>
            <th>修订内容摘要</th>
            <th>修订部门</th>
            <th>修订人</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(record, index) in revisionRecords" :key="index">
            <td><input type="text" v-model="record.version" /></td>
            <td>
              <input
                type="text"
                v-model="record.effectiveDate.year"
                style="width: 40px"
              />年
              <input
                type="text"
                v-model="record.effectiveDate.month"
                style="width: 40px"
              />月
              <input
                type="text"
                v-model="record.effectiveDate.day"
                style="width: 40px"
              />日
            </td>
            <td><input type="text" v-model="record.summary" /></td>
            <td><input type="text" v-model="record.department" /></td>
            <td><input type="text" v-model="record.revisor" /></td>
          </tr>
        </tbody>
      </table>

      <!-- 使用提示 -->
      <p style="font-weight: bold; font-size: 1.4em">
        使用前请确认是否为最新版本！
      </p>
      <!-- </div> -->
      <div class="section">
        <h2 class="section-title">1. 目的</h2>
        <p class="content">
          为保障公司良好的工作秩序，提高员工的工作效率，树立良好的工作作风，特制订本管理办法。
        </p>
      </div>
      <div class="section">
        <h2 class="section-title">2. 范围</h2>
        <p class="content">
          本管理办法适用于深圳市艾美思普科技有限公司所有人员。
        </p>
      </div>
      <div class="section">
        <h2 class="section-title">3. 职责</h2>
        <p class="content">
          3.1
          企业管理部：负责培训、解释、说明、监督实施与执行本管理办法的具体作业。
        </p>
        <p class="content">
          3.2 其他各部门：负责对本部门进行培训、监督与配合执行。
        </p>
      </div>
      <div class="section">
        <h2 class="section-title">4. 定义</h2>
        <p class="content">（无）</p>
      </div>
      <div class="section">
        <h2 class="section-title">5. 内容</h2>
        <div class="subsection">
          <h3 class="subsection-title">5.1 工作时间</h3>
          <p class="content">
            5.1.1 正常工作时间：公司实行每周五天工作制，每周工作40小时；
          </p>
          <p class="content">
            5.1.2
            基本出勤时间：详见附件二《公司各部门基本出勤时间安排表》，如因生产等原因临时安排的不同的出勤时间，具体以各事业部书面批准的通知为准，并报事业部人资、系统运营组备案；
          </p>
          <p class="content">
            5.1.3
            加班时间由各事业部根据实际需要安排，具体按《员工加班管理规定》、《职员加班管理规定》实施；
          </p>
          <p class="content">
            5.1.4 如因节气变化作息时间有所变更，依公司通知执行。
          </p>
        </div>
        <div class="subsection">
          <h3 class="subsection-title">5.2 考勤管理</h3>
          <p class="content">
            5.2.1
            公司上下班实行刷卡制度。除总经理/副总经理及总经理核准免打卡人员外，其余员工应严格遵守本制度，严禁代刷卡。对于代刷卡员工，一经发现，双方开除处理；
          </p>
          <p class="content">
            5.2.2
            职员工上、下班必须按序排队刷卡，刷卡有效打卡时间为上班时间的前30分钟内，下班时间的后30分钟内，其它时间刷卡视为无效刷卡；
          </p>
          <p class="content">
            5.2.3
            所有人员不得于下班前在卡钟处等待刷卡，如有违者，给予警告处分一次；
          </p>
          <p class="content">
            5.2.4 所有人员上班不得迟到、早退，凡迟到、早退者依以下条款处理：
          </p>
          <ul class="content-list">
            <li>
              5.2.4.1 职员及基层月薪人员迟到或早退1 -
              20分钟内，每次处以50元罚款；超过20分钟（含20分钟）则按旷工处理（详见5.2.6.2）；
            </li>
            <li>
              5.2.4.2 员工正班迟到或早退1 -
              20分钟内，考勤系统自动扣除正班30分钟，并每次处以50元罚款；超过20分钟（含20分钟），则按旷工处理（详见5.2.6.2）；
            </li>
            <li>
              5.2.4.3 员工加班迟到或早退1 -
              20分钟内，考勤系统自动扣除加班30分钟，并每次处以50元罚款；如迟到早退超过20分钟（含20分钟），则视为加班旷工，按加班旷工处理（详见5.2.6.2）。
            </li>
          </ul>
          <p class="content">5.2.5 凡属下列情况之一，则视为旷工。</p>
          <ul class="content-list">
            <li>5.2.5.1 用不当手段，骗取、涂改、伪造休假证明；</li>
            <li>5.2.5.2 未请假或请假未批准，而私自不上班者；</li>
            <li>
              5.2.5.3
              超过批准的假期又未及时报上级续假，以及未提供有关证明的，未及时续假部分视为旷工；
            </li>
            <li>5.2.5.4 不服从部门职位调整及分配，逾期不到岗的，视为旷工；</li>
            <li>
              5.2.5.5 迟到、早退、擅离职守超过20分钟（含20分钟），视为旷工；
            </li>
          </ul>
          <p class="content">
            5.2.6 旷工责罚制度（包括所有职员、基层和员工）：
          </p>
          <ul class="content-list">
            <li>5.2.6.1 凡有旷工行为者，不计发旷工时间段的工资；</li>
            <li>
              5.2.6.2
              员工正班旷工＞20分钟者，考勤系统自动扣除相关班制时长为旷工时间。正班旷工≤4小时，并每次罚款100元；正班旷工＞4小时，并每次罚款150元；加班旷工，考勤系统自动扣除加班申请时间，并每次罚款100元；职员及基层正班旷工≤4小时，每次罚款100元；正班旷工＞4小时，并每次罚款150元；并扣除相应旷工时段工资。
            </li>
            <li>
              5.2.6.3
              全体职员工无正当理由而无故连续旷工三日（含三日）以上为自动离职，公司不支付任何费用与补偿；
            </li>
            <li>
              5.2.6.4
              全体职员工当月旷工三天或年累计旷工达七天者，予以开除，不支付任何经济补偿金；
            </li>
          </ul>
          <p class="content">
            5.2.7
            公司所有人员均须规范打卡，凡在规定时间外的打卡均视为无效卡（即漏卡），此类情况每月不得超过3次（含3次），如超过3次，则每次罚款50元给予警示；
          </p>
          <p class="content">
            5.2.8
            凡法定节假日加班或申请调班者上下班时须按规定作息时间打卡，若打卡记录不全，则视为当日缺勤。
          </p>
          <p class="content">
            5.2.9
            凡因公外出，须在公出前一个小时填写《公出申请单》，逐级审批后，上交事业部前台文员，由事业部前台文员转交考勤文员签录；如遇特殊情况，则必须于公出后1天内补交《公出申请单》，如不及时上交则按缺勤处理。
          </p>
          <p class="content">
            5.2.10
            考勤文员每日发布的《异常考勤确认表》，须按时逐级确认（员工确认——直接上级确认——部门主管经理确认），不得代签，不得编造签卡原因，一经发现当事人按旷工1天处理，直接管理人员记大过一次。
          </p>
          <p class="content">5.2.11 其它特殊情况：</p>
          <ul class="content-list">
            <li>
              5.2.11.1
              如考勤卡异常/考勤机异常，须于上班前到事业部保安处登记（办公楼职员向直接上级申报），值班保安记录签卡时间，并于第二日早晨将前一日签卡记录《刷卡异常登记表》报于事业部人资处，人资转交系统运营组考勤文员进行签卡处理；
            </li>
            <li>
              5.2.11.2
              新入职员工，在正式厂牌发放之前的考勤由班组每天上午十点前提供前一工作日考勤电子档于考勤文员签卡处理；
            </li>
          </ul>
        </div>
        <div class="subsection">
          <h3 class="subsection-title">5.3 休假管理</h3>
          <p class="content">
            5.3.1
            员工休假分类：国家法定节假日、公休假、工伤假、事假、病假、婚假、丧假、年假等假期。
          </p>
          <p class="content">
            5.3.2
            各类休假，必须以书面形式填写《请假单》逐级审批后，报人资复核后交考勤管理人员进行考勤处理，详见附件一《请假核决权限表》。
          </p>
          <p class="content">
            5.3.3
            凡请假者，必须提前1天将签审好的《请假单》交到事业部人资处备案，备案后才能按请假状况离岗，否则按旷工处理。特殊情况则要求请假者在返厂工作后的第一个工作日内将审批后《请假单》补交到事业部人资，否则按旷工处理。
          </p>
          <p class="content">
            5.3.4
            销假：结合《请假单》申请的时间，凡提前返厂上班或延假者应在1个工作日内到人资处进行销假，销假时必须在《请假单》上有直属上级的签名确认，口头销假无效。
          </p>
          <p class="content">
            5.3.5 休假超过规定期限，应依请假程序办理请假，否则按旷工处理。
          </p>
          <p class="content">
            5.3.6
            不得借故请假而前往其他公司上班，违者按旷工论处，此情形连续三天，以自动离职处理，如给公司造成损失的，追究其经济责任和法律责任。
          </p>
          <p class="content">
            5.3.7
            请假理由不充足或有妨碍工作时，直属上级有权不给假或缩短假期或调整假期。
          </p>
          <p class="content">
            5.3.8 不得先休假再补假，如有特殊情况，酌情处理。
          </p>
          <p class="content">
            5.3.9
            关于休假管理未尽事宜请参阅《假期管理规定》，若有冲突的地方，则以《假期管理规定》为准。
          </p>
        </div>
      </div>
      <div class="section">
        <h2 class="section-title">6. 附件、相关文件及表单</h2>
        <div class="subsection">
          <h3 class="subsection-title">6.1 相关附件</h3>
          <p class="content">6.1.1 《请假核决权限表》 附件一</p>
          <p class="content">6.1.2 《公司各部门基本出勤时间安排表》 附件二</p>
        </div>
        <div class="subsection">
          <h3 class="subsection-title">6.2 相关文件</h3>
          <p class="content">6.2.1 《员工薪资管理办法》</p>
          <p class="content">6.2.2 《职员薪资管理办法》</p>
          <p class="content">6.2.3 《假期管理规定》</p>
          <p class="content">6.2.4 《员工加班管理规定》</p>
          <p class="content">6.2.5 《职员加班管理规定》</p>
          <p class="content">6.2.6 《年假管理规定》</p>
        </div>
        <div class="subsection">
          <h3 class="subsection-title">6.3 相关表单</h3>
          <p class="content">6.3.1 《刷卡异常登记表》</p>
          <p class="content">6.3.2 《公出申请单》</p>
          <p class="content">6.3.3 《请假单》</p>
        </div>
      </div>
      <div class="section">
        <h2 class="section-title">附件一：请假核决权限表</h2>
        <table class="table">
          <thead>
            <tr>
              <th>职位</th>
              <th>期限</th>
              <th>请假人</th>
              <th>组长</th>
              <th>主管</th>
              <th>经理</th>
              <th>总监<br />事业部部长</th>
              <th>总经理<br />副总经理</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td rowspan="4">普工请假<br />组长以下人员</td>
              <td>1天</td>
              <td>○</td>
              <td>●</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>2 - 3天</td>
              <td>○</td>
              <td>◎</td>
              <td>●</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>4—7天</td>
              <td>○</td>
              <td>◎</td>
              <td>⊙</td>
              <td>●</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>8天以上</td>
              <td>○</td>
              <td>◎</td>
              <td>◎</td>
              <td>⊙</td>
              <td>●</td>
              <td></td>
            </tr>
            <tr>
              <td rowspan="2">组长级请假</td>
              <td>1 - 2天</td>
              <td>○</td>
              <td></td>
              <td>◎</td>
              <td>●</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>3天以上</td>
              <td>○</td>
              <td></td>
              <td>◎</td>
              <td>⊙</td>
              <td>●</td>
              <td></td>
            </tr>
            <tr>
              <td rowspan="2">职员请假<br />E级职员</td>
              <td>1天</td>
              <td>○</td>
              <td></td>
              <td>◎</td>
              <td>●</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>2天以上</td>
              <td>○</td>
              <td></td>
              <td>◎</td>
              <td>⊙</td>
              <td>●</td>
              <td></td>
            </tr>
            <tr>
              <td rowspan="2">职员请假<br />D级职员</td>
              <td>1 - 2天</td>
              <td>○</td>
              <td></td>
              <td></td>
              <td>⊙</td>
              <td>●</td>
              <td></td>
            </tr>
            <tr>
              <td>3天以上</td>
              <td>○</td>
              <td></td>
              <td></td>
              <td>◎</td>
              <td>⊙</td>
              <td>●</td>
            </tr>
            <tr>
              <td rowspan="2">职员请假<br />C级职员</td>
              <td>1天</td>
              <td>○</td>
              <td></td>
              <td></td>
              <td>⊙</td>
              <td>●</td>
              <td></td>
            </tr>
            <tr>
              <td>2天以上</td>
              <td>○</td>
              <td></td>
              <td></td>
              <td></td>
              <td>⊙</td>
              <td>●</td>
            </tr>
            <tr>
              <td rowspan="2">职员请假<br />B级职员</td>
              <td>一日以内</td>
              <td>○</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td>●</td>
            </tr>
            <tr>
              <td>一天</td>
              <td>○</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td>●</td>
            </tr>
            <tr>
              <td>说明</td>
              <td colspan="7">○—请假人申请 ◎—审核 ⊙—复核 ●—批准</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div style="line-height: 30px">
        <h2 class="section-title">附件二：公司各部门基本出勤时间安排表</h2>
        <div @dblclick="editAttendance = true">
          <p v-if="!editAttendance" style="text-indent: 2em; text-align: left">
            为确保公司职员工上下班井然有序，满足职员工下班就餐需求，促进食堂管理合理化、规范化，公司实行错峰上、下班管理，以更好的确保食堂就餐与员工休息不受到影响。对此，公司特对各事业部基本出勤时间进行如下安排：
          </p>
          <textarea
            v-else
            v-model="attendanceDescription"
            @blur="editAttendance = false"
            style="width: 100%; height: 100px"
          ></textarea>
        </div>
        <ol>
          <li
            v-for="(item, index) in attendanceTimes"
            :key="index"
            @dblclick="editAttendanceTimes.splice(index, 1, true)"
          >
            <p v-if="!editAttendanceTimes[index]">
              {{ item.department }}：{{ item.time }};
            </p>
            <div v-else style="display: flex">
              <input
                type="text"
                v-model="item.department"
                @blur="editAttendanceTimes.splice(index, 1, false)"
              />
              <input
                type="text"
                v-model="item.time"
                @blur="editAttendanceTimes.splice(index, 1, false)"
              />
            </div>
          </li>
        </ol>
        <p @dblclick="editNote = true">
          <span v-if="!editNote"
            >注：具体夏季与秋季出勤作息时间调整或更改以企业管理部发放的通知为准！</span
          >
          <textarea
            v-else
            v-model="note"
            @blur="editNote = false"
            style="width: 100%; height: 50px"
          ></textarea>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AttendanceManagement",
  data() {
    return {
      meta: {
        fileNumber: "AM-A-JY-02",
        version: "C/0",
        department: "企业管理部",
        effectiveDate: "2015-01-01",
      },
      approvalPerson: "", //批准
      reviewer: "", //审核
      compilationPerson: "", //编制
      approvalDate: { year: "", month: "", day: "" },
      reviewDate: { year: "", month: "", day: "" },
      compilationDate: { year: "", month: "", day: "" },
      distributionGroups: [
        [
          { value: "01", label: "01:总 经 理室" },
          { value: "02", label: "02:管理者代表" },
          { value: "03", label: "03:企业管理部" },
          { value: "04", label: "04:财务管理部" },
        ],
        [
          { value: "10", label: "10:手机厂务部" },
          { value: "16", label: "16:总装生产部" },
          { value: "25", label: "25:品质部" },
          { value: "30", label: "30:光电厂务部" },
        ],
        [
          { value: "11", label: "11:手机业务部" },
          { value: "20", label: "20:厂务部" },
          { value: "26", label: "26: S M T" },
          { value: "31", label: "31:光电生产部" },
        ],
        [
          { value: "12", label: "12:手机物控部" },
          { value: "21", label: "21:业务部" },
          { value: "27", label: "27:二车间" },
          { value: "32", label: "32:光电品质部" },
        ],
        [
          { value: "13", label: "13:板卡生产部" },
          { value: "22", label: "22:研发部" },
          { value: "28", label: "28:三车间" },
          { value: "33", label: "33:光电业务部" },
        ],
        [
          { value: "14", label: "14:手机品质部" },
          { value: "23", label: "23:物控部" },
          { value: "29", label: "29:采购部" },
          { value: "34", label: "34:光电物控部" },
        ],
        [
          { value: "15", label: "15:手机工程部" },
          { value: "24", label: "24:工程部" },
        ],
      ],
      selectedDepartments: {},
      revisionRecords: [
        {
          version: "",
          effectiveDate: { year: "", month: "", day: "" },
          summary: "",
          department: "",
          revisor: "",
        },
      ],
      editMeta: false,
      editApproval: false,
      editReview: false,
      editCompilation: false,
      isEditingDepartment: false,
      editAttendance: false,
      attendanceDescription:
        "为确保公司职员工上下班井然有序，满足职员工下班就餐需求，促进食堂管理合理化、规范化，公司实行错峰上、下班管理，以更好的确保食堂就餐与员工休息不受到影响。对此，公司特对各事业部基本出勤时间进行如下安排：",
      attendanceTimes: [
        {
          department: "1、手机事业部",
          time: "8：00 -- 11：50，13：30 -- 17：40",
        },
        {
          department: "2、光电事业部",
          time: "8：00 -- 11：45，13：30 -- 17：45",
        },
        {
          department: "3、企业管理部",
          time: "8：30 -- 12：00，13：30 -- 18：00",
        },
        {
          department: "4、财务管理部",
          time: "8：30 -- 12：00，13：30 -- 18：00",
        },
      ],
      editAttendanceTimes: [false, false, false, false],
      editNote: false,
      note: "注：具体夏季与秋季出勤作息时间调整或更改以企业管理部发放的通知为准！",
    };
  },
  methods: {
    addRevisionRecord() {
      this.revisionRecords.push({
        version: "",
        effectiveDate: { year: "", month: "", day: "" },
        summary: "",
        department: "",
        revisor: "",
      });
    },
    saveRecord() {
      console.log(this.meta);
    },
    printForm() {
      window.print();
    },
  },
};
</script>
<style lang="scss" scoped>
/* @import "./qjhejueqxb.css"; */
.attendance-management {
  line-height: 1.5;
  font-family: "宋体", sans-serif;
  /* 设置字体 */
  padding: 20px;
  /* 页面内边距 */
}

.header {
  width: 1200px;
  margin: 0 auto;
}

.header-left {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #409eff;

  i {
    // font-size: 20px;
    color: #409eff;
  }

  a.back-btn.router-link-active {
    color: #409eff;
  }
}

.title {
  text-align: center;
  /* 标题居中 */
  // font-size: 24px;
  /* 标题字体大小 */
}

.meta {
  margin: 0 auto;
  width: 170px;
  text-align: left;
  /* 元信息居中 */
  margin-bottom: 5px;
  /* 元信息下方边距 */
  color: #000;
  /* 元信息字体颜色 */
}

.meta p {
  margin: 5px 0;
  /* 元信息段落内边距 */
}

/* 批准、审核、编制部分样式 */
.attendance-management div div {
  /* display: flex; */
  /* flex-direction: column; */
  /* 垂直排列 */
  align-items: center;
  /* 水平居中 */
}

.attendance-management div div label {
  margin-bottom: 5px;
  /* 标签下方边距 */
}

.attendance-management div div span {
  display: flex;
  /* 水平排列输入框 */
}

.attendance-management div div span input {
  margin-right: 5px;
  /* 输入框之间的间距 */
}

input {
  border: none;
  /* 去掉输入框边框 */
  background-color: transparent;
  /* 去掉输入框背景色 */
}

/* 分发部门编号部分样式 */
.distribution-groups {
  margin-bottom: 20px;
  /* 下方边距 */
}

.distribution-groups label {
  margin-bottom: 5px;
  /* 标签下方边距 */
  display: block;
  /* 单独占一行 */
}

.distribution-groups div {
  margin-bottom: 10px;
  /* 每个分组下方边距 */
}

/* 修订记录表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  /* 表格下方边距 */
}

table th,
table td {
  border: 1px solid #ccc;
  /* 边框颜色和样式 */
  padding: 8px;
  /* 内边距 */
  text-align: center;
  /* 文本左对齐 */
}

table caption {
  margin-bottom: 10px;
  /* 标题下方边距 */
  font-size: 18px;
  /* 标题字体大小 */
  font-weight: bold;
  /* 标题加粗 */
}

/* 章节样式 */
.section {
  /* margin-bottom: 10px; */
  /* 章节下方边距 */
}

.section-title {
  text-align: left;
  /* font-size: 20px; */
  /* 章节标题字体大小 */
  color: #007bff;
  /* 章节标题字体颜色 */
  /* margin-bottom: 10px; */
  /* 章节标题下方边距 */
}

.content {
  margin-bottom: 10px;
  /* 内容段落下方边距 */
  text-align: left;
  text-indent: 2em;
}

/* 子章节样式 */
.subsection {
  text-indent: 2.2em;
  /* 子章节左缩进 */
}

.subsection-title {
  text-indent: 1em;
  /* font-size: 18px; */
  /* 子章节标题字体大小 */
  color: #333;
  /* 子章节标题字体颜色 */
  /* margin-bottom: 10px; */
  /* 子章节标题下方边距 */
  text-align: left;
}

ol li {
  list-style: none;
}

/* 列表样式 */
.content-list {
  padding-left: 20px;
  /* 列表左缩进 */
  text-align: left;

  li {
    // 取消列表符号
    list-style: none;
  }
}

/* 附件表格样式 */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  border: 1px solid #000;
  padding: 5px;
  text-align: center;
  /* 文本居中 */
}

@media print {
  .header {
    width: 900px;
    margin: 0px;
  }

  .header-left {
    display: none;
  }

  .add-department {
    display: none;
  }

  .add-record-btn {
    display: none;
  }

  table {
    margin: 10px 0px;
  }

  .info-table,
  .content-table,
  .approval-table {
    border: 1px solid #000;

    td,
    th {
      border: 1px solid #000;
    }
  }

  td,
  th {
    padding: 5px;
    border: 1px solid #000;
    white-space: nowrap;
  }
}
</style>
